<template>
	<view class="goods-order-page">
		<view class="no-data" v-if="orderList.length==0">
			<text>暂无订单信息</text>
		</view>
		<view class="order-item" v-for="item in orderList" :key="item.orderNo" @click="showOrderCode(item.orderNo)">
			<view class="order-title">
				<text>订单号：{{item.orderNo}}</text>
			</view>

			<view class="order-rule">
				<view class="oreder-goods" v-for="goods in item.goodsList" :key="goods.id">
					<text>{{goods.goodsName}}</text>
					<text>￥{{goods.retailPrice}} x{{goods.count}}</text>
				</view>
			</view>
			<view class="order-tip">
				<text style="color: crimson;">(点击查看核销码)</text>
				<text>{{item.payInfo.payChannel=='CARD'?'会员卡支付':'微信支付'}}：<text
						style="color: brown;font-weight: bold;font-size: 34rpx;">{{item.orderTotal}}</text>元</text>
			</view>
			<view class="order-tip">
				<text>购买时间：{{item.createTime}}</text>
				<text>订单状态：{{getStatus(item.orderStatus)}}</text>
			</view>
		</view>
		<u-overlay :show="showCode" @click="showCode=false">
			<view class="ticket-pop">
				<view class="ticket-info">
					<view class="verifyCode">
						<text>序列号：{{resolveCode(orderCode.printNo)}}</text>
						<text>验证码：{{resolveCode(orderCode.verifyCode)}}</text>
					</view>
					<view class="code-box">
						<view class="qr-code">
							<view v-if="!isVerificated">
								<uqr-code size="160" @complete="completeCode" :text="qrCode" :show='showCode'
									:foregroundColor="foregroundColor">
								</uqr-code>
							</view>
							<view v-if="isVerificated">
								<image src="../../static/image/cant.png" style="width: 160px;" mode="widthFix"></image>
							</view>
						</view>
						<image class="verificated" v-show="qrCode!='' && isVerificated"
							src="../../static/image/hexiao.png" mode="widthFix"></image>

					</view>
					<view class="tips" style="color: #999;font-size: 26rpx;margin-top: 130px;">
						<u-icon name="close" color="#999" />
						<text style="margin-left: 20rpx;">商品不支持退还</text>
					</view>
				</view>

				<image src="../../static/image/ticket_bg.png" class="ticket_bg"></image>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import {
		goodsOrderList,
		goodsOrderStatus,
		goodsOrderPrient
	} from '@/common/http/api.js';
	import UqrCode from '../../components/uqrcode/uqrcode.vue'
	export default {
		components: {
			UqrCode
		},
		data() {
			return {
				queryParams: {
					"openId": uni.getStorageSync('openId'),
					"orderType": "GM",
					"statusList": ["10"],
					"pageSize": 10,
					"pageNo": 1
				},
				orderList: [],
				totalOrder: 0,
				showCode: false,
				qrCode: '',
				orderCode: {
					printNo: '',
					verifyCode: ""
				},
				isVerificated: false,
				foregroundColor: '#000000',
				currentOrderNo: ''
			}
		},
		methods: {
			getList() {
				goodsOrderList(this.queryParams).then(res => {
					this.orderList.push(...res.data)
					this.totalOrder = res.page.totalSize
				})
			},
			showOrderCode(orderNo) {

				this.queryPrient(orderNo)
				this.currentOrderNo = orderNo

			},
			queryStatus(channelOrderNo) {
				goodsOrderStatus({
					channelOrderNo
				}).then(res => {
					const {
						data
					} = res;
					let printNo = data.printNo.slice(10, 19);
					let verifyCode = data.verifyCode.slice(10, 19);
					this.qrCode = printNo + '|' + verifyCode;
					this.orderCode.verifyCode = data.verifyCode
					this.orderCode.printNo = data.printNo
					this.showCode = true
				})
			},
			queryPrient(channelOrderNo) {
				goodsOrderPrient({
					channelOrderNo
				}).then(res => {

					if (res.data.isVerificated == 1) {
						this.isVerificated = true
						this.foregroundColor = '#cacaca'
					} else {
						this.isVerificated = false
						this.foregroundColor = '#000000'
					}

					this.queryStatus(channelOrderNo)
				})
			},
			completeCode() {
				if (this.qrCode != '') this.showCode = true
			}
		},
		onLoad() {
			this.getList()
			uni.setNavigationBarTitle({
				title: this.$store.state.cinemaName
			})
		},
		onReachBottom() {
			if (this.orderList.length == this.totalOrder) return
			this.queryParams.pageNo++;
			this.getList()
		},
		computed: {
			resolveCode() {
				return code => {
					return code.slice(10, 19)
				}
			},
			getStatus() {
				return code => {
					const data = {
						"0": '已完成',
						"1": '待支付',
						"2": '待出票',
						"3": '支付成功',
						"4": '待退票',
						"5": '退票中',
						"6": '已退票',
						"9": '待出卖品',
						"10": '支付完成',
						"-1": '已取消'
					}
					return data[code]
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.no-data {
		width: 100vw;
		text-align: center;

		text {
			line-height: 140rpx;
			font-size: 26rpx;
			color: #999;
		}
	}

	.goods-order-page {
		background-color: #f0f0f5;
		min-height: 100vh;
		box-sizing: border-box;
		padding: 20rpx 0;

		.order-item {
			background-color: #fff;
			width: 95vw;
			box-sizing: border-box;
			border-radius: 30rpx;
			margin: 0 auto 20rpx auto;
			padding: 20rpx;

			.order-title {
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				border-bottom: 1px solid #f0f0f5;

				text {
					line-height: 60rpx;
				}
			}

			.order-rule {
				font-size: 28rpx;
				color: #999;
				border-bottom: 1px solid #f0f0f5;

				text {
					display: inline-block;
					line-height: 60rpx;
				}

				.oreder-goods {
					display: flex;
					justify-content: space-between;
				}
			}

			.order-tip {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;

				text {
					line-height: 50rpx;
					color: #999;
				}
			}
		}
	}




	.ticket-pop {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100vw;
		height: 100vh;

		.ticket_bg {
			position: absolute;
			width: 100vw;
			height: 60vh;
			z-index: -1;
		}

		.ticket-info {
			width: 100vw;
			height: 60vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			box-sizing: border-box;
			padding-top: 120rpx;
			position: relative;

			.verifyCode {
				display: flex;
				flex-direction: column;
				padding: 15rpx;
				border: 2px solid #cacaca;
				border-radius: 30rpx;

			}

			.code-box {
				margin-top: 80rpx;
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;

				.qr-code {
					position: absolute;
					z-index: 0;
				}

				.verificated {
					width: 100px;
					z-index: 999;
					position: absolute;
					right: -100px;
					top: -30px;
				}
			}

			.tips {
				position: absolute;
				bottom: 160rpx;
				display: flex;
			}
		}
	}
</style>